import React, { Component } from 'react';
import { Toast } from 'antd-mobile';
import { hashHistory } from 'react-router';
import * as common from 'common/common.js';
import './OrderPreview.less';

import SeperateLine from 'common/components/SeperateLine.js';
import Header from 'common/components/Header.js';

import * as userApi from 'common/api/UserApi.js';
import * as orderApi from 'common/api/OrderApi.js';

/**
 * 订单预览组件
 * @param {address} 	地址信息
 * @param {orderGoodsList} 	订单商品列表数据
 * @param {orderCount} 	订单金额
 */
class OrderPreview extends Component{
	
	constructor(props) {
	    super(props);
	    this.state = {
	    	addressId: "",
	    	address: {},
	    	cartIds: this.props.params.cartIds,
    		orderGoodsList: [],
    		orderGoodsMoney: {}
	    }
	}
	
	componentDidMount(){
		const { cartIds } = this.state;
		
		//1、获取购物车列表
		userApi.cartList({
			cartIds: cartIds
		}).then(result => {
			if(result.code == common.SUCCESS){
				this.setState({
					orderGoodsList: result.data
				})
			}else{
				Toast.info(result.msg, common.TIPS_INFO_DURATION);
			}
		})
		
		//2.获取地址信息
		userApi.userAddressList({
			userId: common.userId()
		}).then(result => {
			if(result.code == common.SUCCESS){
				//选择收货地址中第一个地址
				if(result.data && result.data.length > 0){
					this.setState({
						address: result.data[0],
						addressId: result.data[0].id
					}, function(){
						this.computeOrder();
					})
				}else{
					this.computeOrder();
				}
			}else{
				Toast.info(result.msg, common.TIPS_INFO_DURATION);
			}
		})
	}
	
	//计算订单金额
	computeOrder = () => {
		Toast.loading("", common.TIPS_LOADING_DURATION);
		orderApi.orderPreview({
			memberId: common.userId(),
			addressId: this.state.addressId,
			cartIds: this.state.cartIds
		}).then(result => {
			Toast.hide();
			if(result.code == common.SUCCESS){
				if(result.data){
					this.setState({
						orderGoodsMoney: result.data
					})
				}else{
					common.goBack();
					Toast.info("去我的菜单查看待付款订单", common.TIPS_INFO_DURATION);
				}
			}else{
				Toast.info(result.msg, common.TIPS_INFO_DURATION);
			}
		})
	}
	
	//立即支付
	gotoPay = () => {
		const { cartIds, addressId } = this.state;
		if(addressId == ""){
			Toast.info("请添加地址信息", common.TIPS_INFO_DURATION);
			return;
		}
		Toast.loading("", common.TIPS_LOADING_DURATION);
		orderApi.createOrder({
			memberId: common.userId(),
			addressId: addressId,
			cartIds: cartIds
		}).then(result => {
			Toast.hide();
			if(result.code == common.SUCCESS){
				Toast.info("前往支付页面中...", common.TIPS_INFO_DURATION);
				setTimeout(() => {
					Toast.hide();
					common.gotoOrderPay({
						orderId: result.data.id,
						from: "orderPreview"
					})
				}, 1);
			}else{
				Toast.info(result.msg, common.TIPS_INFO_DURATION);
			}
		})
	}

	//地址页面
	gotoAddressList = () => {
		hashHistory.push("/userAddress/"+this.state.addressId);
	}
	
	render(){
		const { addressId, address, orderGoodsList, orderGoodsMoney } = this.state;

		return(
			<div className="order">
				<Header title={"订单"}></Header>
				<SeperateLine lineHeight={"0.9rem"}></SeperateLine>
				{/* 收货地址 */}
				<div className="order_address_container">
					{
						addressId &&
						<div className="order_address" onClick={() => this.gotoAddressList()}>
							<div className="order_address_title">
								{address.receiverName} {address.phone}
							</div>
							<div className="order_address_info">
								{address.address}
							</div>
						</div>
					}
					<div className="order_address_edit" onClick={() => this.gotoAddressList()}>
						<img src="assets/img/right.png"/>
					</div>
				</div>
				{/* 下单商品列表 */}
				<div className="order_goods_container">
					<div className="order_goods">
					{
						orderGoodsList.map((item, index) => {
							return(
								<div key={index} className="order_goods_item">
									<div className="left">
										<img src={item.goodsPic}/>
									</div>
									<div className="right">
										<div className="top">
											{item.goodsName}
										</div>
										<div className="bottom">
											<span className="price">￥{common.fenToYuan(item.goodsPrice)}</span>
											<span className="num">x&nbsp;{item.goodsNum}</span>
										</div>
									</div>
								</div>
							)
						})
					}
					</div>
				</div>
				<SeperateLine lineHeight={"0.2rem"} bg={"#e8e8ed"}></SeperateLine>
				{/* 订单金额信息  */}
				<div className="order_count_container">
					<div className="order_count">
						<div className="order_count_item">
							<span>商品金额</span>
							<span>￥{common.fenToYuan(orderGoodsMoney.cartTotalMoney)}</span>
						</div>
						<div className="order_count_item">
							<span>订单运费</span>
							<span>+￥{common.fenToYuan(orderGoodsMoney.orderFreightMoney)}</span>
						</div>
						<div className="order_count_item">
							<span>订单优惠</span>
							<span>-￥{common.fenToYuan(orderGoodsMoney.orderDiscountMoney)}</span>
						</div>
						<div className="order_count_item">
							<span>代金券</span>
							<span>-￥{common.fenToYuan(orderGoodsMoney.orderCashCouponMoney)}</span>
						</div>
					</div>
					<div className="order_count_total">
						<span>总金额: </span>
						<span>￥{common.fenToYuan(orderGoodsMoney.orderPayMoney)}</span>
					</div>
				</div>
				<SeperateLine lineHeight={"0.9rem"}></SeperateLine>
				<div className="order_pay" onClick={this.gotoPay.bind(this)}>
					立即支付
				</div>
			</div>
		)
	}
}

export default OrderPreview;